<template>
  <div class="middle">
    <el-card style="padding-top: 0">
      <template #header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
          @select="handleSelect">
          <el-menu-item index="0">销售额</el-menu-item>
          <el-menu-item index="1">访问量</el-menu-item>
          <div class="flex-grow"></div>

          <el-radio-group v-model="dateRange" size="default">
            <el-radio-button label="今日" />
            <el-radio-button label="本周" />
            <el-radio-button label="本月" />
            <el-radio-button label="今年" />
          </el-radio-group>
          <div style="display:flex; align-items: center; margin-left: 20px;">
            <el-date-picker v-model="dateSelect" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
              size="default" :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
          </div>
        </el-menu>
      </template>
      <div class="content">
        <!-- 销售额 -->
        <div class="sale">
          <div id="saleChart"></div>
          <div class="saleRank">
            <p>门店销售额排名</p>
            <ul>
              <li v-for="(order, index) in orderRank" :key="order.no">
                <span :class="{ active: index < 3 }">{{ index + 1 }}</span>
                <span class="name">{{ order.name }}</span>
                <span class="count">{{ numberFormat(order.count) }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!--  访问量 -->
        <div class="visit">
          <div id="visitChart"></div>
          <div class="visitRank"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {

}
</script>
<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useReportInfoData } from '@/stores/reportData';
import * as echarts from 'echarts'
import useFormat from '@/hooks/useFormat'
const { numberFormat, moneyFormat } = useFormat()
const reportInfoDataStore = useReportInfoData()
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const dateRange = ref('今日')
const dateSelect = ref('')

let saleChart: any
onMounted(() => {
  saleChart = echarts.init(document.querySelector('#saleChart') as HTMLElement)

  window.addEventListener('resize', () => {
    saleChart?.resize()
  })
})

const orderFullYearAxis = computed(() => reportInfoDataStore.reportData.orderFullYearAxis)
const orderFullYear = computed(() => reportInfoDataStore.reportData.orderFullYear)
const userFullYearAxis = computed(() => reportInfoDataStore.reportData.userFullYearAxis)
const userFullYear = computed(() => reportInfoDataStore.reportData.userFullYear)

const orderRank = computed(() => reportInfoDataStore.reportData.orderRank)
const userRank = computed(() => reportInfoDataStore.reportData.userRank)

watch(() => reportInfoDataStore.reportData, () => {
  saleChart.setOption({
    title: {
      text: '销售趋势',
      subtext: '销售趋势展示',
      textStyle: { // 主标题样式
        fontSize: 14
      },
      left: 10
    },
    xAxis: {
      data: userFullYearAxis.value
    },
    yAxis: {

    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: orderFullYear.value,
        color: 'skyblue',
        barWidth: '50%',
        itemStyle: {
          color: 'skyblue'
        },
        label: {
          show: true,
          position: 'top',
          color: '#666'
        }
      }
    ],
    grid: {
      // top: 40
      bottom: 25
    },
    legend: {},
    tooltip: {}
  })
})

</script>

<style scoped lang="scss">
.middle {
  margin-top: 20px
}

.flex-grow {
  flex-grow: 1;
}

:deep(.el-card__header) {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#saleChart {
  width: 66%;
  height: 280px
}

.sale {
  display: flex;

  .saleRank {
    flex: 1;

    p {
      font-size: 14px;
    }

    ul {
      list-style: none;
      padding: 0;
      font-size: 12px;

      li {
        position: relative;
        line-height: 26px;

        span:first-child {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 5px;
          line-height: 20px;
          text-align: center;
          border-radius: 50%;
          color: #000;
        }

        .active {
          background-color: #000;
          color: white !important;
        }

        .count {
          position: absolute;
          right: 15px;
        }
      }
    }
  }

}
</style>